<template>
  <div>
  <div class="swipe">
    <mt-swipe :auto="4000">
      <mt-swipe-item class="slide1" v-for="(scroll,index) in scrolls" :key="index">
        <img :src="getImgUrl(scroll.imgsrc)">
      </mt-swipe-item>
    </mt-swipe>
  </div>
  <div class="experts">
    <div>热门专家</div>
    <experts></experts>
  </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import experts from '@/components/front/expert/experts.vue'
    export default {
        name: "Home",
        components:{
          experts,
        },
        data(){
          return {
            scrolls : []
          }
        },
        methods:{
          getScrolls: function (currPage) {
            if(currPage!=null){
              this.currentPage = currPage;
            }
            //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
            api.setDataFromAxios("/scrolls", null, "post")
              .then(res => {
                 this.scrolls = res.scrolls;
                 console.log(this.scrolls);
              });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
          },
          getImgUrl: function (imgsrc) {
            return "../../../static/images/scrolls/" + imgsrc;
          }
        },
      created() {
          this.getScrolls();
      }
    }
</script>

<style scoped>
  .swipe > div > div > div{width: 100%;}
  .swipe > div > div > div > img{width: 100%;}
  .mint-swipe {height: 140px;}
  .experts{height:630px;overflow:hidden;}

</style>
